<template>
  <div class="m-breadcrumbs">
    <div class="logo" @click="onPushHome()"></div>
    <strong>所在位置：</strong>{{aBreads}}
    <!-- <router-link tag="span" to="/" @click.native="onPushHome">首页</router-link> -->
    <span v-for="(item, index) in aBreads" 
      :key="index" 
      :to="item.link" 
      v-text="item.name || item.title" 
      @click="onLink(item.link, index)">
    </span>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  export default {
    props: {
      breads: {
        type: Array
      }
    },
    computed: {
      ...mapGetters(['aBreads'])
    },
    methods: {
      ...mapActions(['resetBreads']),
      onPushHome() {
        if (this.aBreads.length === 0) return
        this.resetBreads()
        this.$router.push('/')
      },
      // 面包屑跳转
      onLink(link, index) {
        if (index !== this.aBreads.length - 1) {
          this.$router.push(link)
        }
      }
    }
  }
</script>

<style lang="scss">
  @import '../scss/_var.scss';
  .m-breadcrumbs {
    position: fixed;
    // left: 180px;
    width: 100%;
    right: 0;
    top: 36px;
    z-index: 10;
    padding: 0 30px;
    background: #fff;
    box-shadow: 0 1px 6px 0 rgba(12,6,12,.1);
    height: 46px;
    line-height: 46px;
    font-size: 0;
    .logo {
      width: 180px;
      height: 28px;
      margin: 0 38px 0 10px;
      display: inline-block;
      cursor: pointer;
      vertical-align: middle;
      background: url('../assets/new/logo_small.png') no-repeat;
    }
    strong {
      color: $color-gray;
      font-size: 14px;
    }
    span {
      margin-left: 6px;
      cursor: pointer;
      font-size: 14px;
      &::after {
        content: "-";
        display: inline-block;
        margin-left: 6px;
      }
      &:last-of-type {
        cursor: text;
        color: $color-gray;
      }
      &:last-of-type::after {
        display: none;
      }
    }
  }
</style>